<!--
 - MineAdmin is committed to providing solutions for quickly building web applications
 - Please view the LICENSE file that was distributed with this source code,
 - For the full copyright and license information.
 - Thank you very much for using MineAdmin.
 -
 - @Author X.Mo<root@imoi.cn>
 - @Link   https://gitee.com/xmo/mineadmin-vue
-->
<template>
    <div
        class="ma-content-block lg:flex justify-between p-4"
        style="background: #fff"
    >
        <!-- CRUD 组件 -->
        <ma-crud :options="crud" :columns="columns" ref="crudRef">
            <!-- 状态列 -->
            <template #status="{ record }">
                <a-switch
                    :checked-value="1"
                    unchecked-value="2"
                    @change="changeStatus($event, record.id)"
                    :default-checked="record.status == 1"
                />
            </template>

            <!-- 操作前置扩展 -->
            <template #operationBeforeExtend="{ record }">
                <a-popconfirm
                    content="确定立刻执行一次?"
                    position="bottom"
                    @ok="run(record)"
                >
                    <a-link v-auth="['setting:crontab:run']"
                        ><icon-caret-right /> 执行一次</a-link
                    >
                </a-popconfirm>
                <a-link @click="openLogModal(record)"
                    ><icon-history /> 日志
                </a-link>
            </template>
        </ma-crud>

        <log-list ref="logsRef" />
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import crontab from '@/api/setting/crontab';
import LogList from './logList.vue';
import { Message } from '@arco-design/web-vue';

const crudRef = ref();
const logsRef = ref();

const types = [
    { label: '命令任务', value: 1 },
    { label: '类任务', value: 2 },
    { label: 'URL任务', value: 3 },
    { label: 'PHP脚本任务', value: 4 }
];

const changeStatus = async (status, id) => {
    const response = await crontab.changeStatus({ id, status });
    if (response.success) {
        Message.success(response.message);
    }
};

const run = async (row) => {
    const response = await crontab.run({ id: row.id });
    response.success && Message.success(response.message);
};

const openLogModal = (row) => {
    logsRef.value.open(row.id);
};

const crud = reactive({
    api: crontab.getPageList,
    showIndex: false,
    pageLayout: 'fixed',
    rowSelection: { showCheckedAll: true },
    operationColumn: true,
    operationColumnWidth: 280,
    add: { show: true, api: crontab.save, auth: ['setting:crontab:save'] },
    edit: { show: true, api: crontab.update, auth: ['setting:crontab:update'] },
    delete: {
        show: true,
        api: crontab.deletes,
        auth: ['setting:crontab:delete']
    }
});

const columns = reactive([
    {
        title: 'ID',
        dataIndex: 'id',
        addDisplay: false,
        editDisplay: false,
        width: 50,
        hide: true
    },
    {
        title: '任务名称',
        dataIndex: 'name',
        search: true,
        commonRules: [{ required: true, message: '任务名称必填' }],
        width: 200
    },
    {
        title: '任务类型',
        dataIndex: 'type',
        search: true,
        commonRules: [{ required: true, message: '任务类型必选' }],
        dict: { data: types, translation: true },
        formType: 'select',
        width: 150
    },
    {
        title: '定时规则',
        dataIndex: 'rule',
        commonRules: [{ required: true, message: '定时规则必填' }],
        extra: '例如：30 */5 * * * *，代表每隔5分钟的第30秒执行任务',
        width: 150
    },
    {
        title: '调用目标',
        dataIndex: 'target',
        formType: 'textarea',
        commonRules: [{ required: true, message: '调用目标必填' }],
        width: 260
    },
    {
        title: '任务参数',
        dataIndex: 'parameter',
        formType: 'textarea',
        width: 200,
        hide: true
    },
    {
        title: '单次执行',
        dataIndex: 'singleton',
        formType: 'radio',
        addDefaultValue: 2,
        dict: {
            data: [
                { label: '是', value: 1 },
                { label: '否', value: 2 }
            ]
        },
        hide: true
    },
    {
        title: '状态',
        dataIndex: 'status',
        search: true,
        formType: 'radio',
        dict: { name: 'data_status', props: { label: 'title', value: 'key' } },
        addDefaultValue: 1,
        width: 120
    },
    {
        title: '备注',
        dataIndex: 'remark',
        hide: true,
        formType: 'textarea'
    },
    {
        title: '创建时间',
        dataIndex: 'created_at',
        addDisplay: false,
        editDisplay: false,
        search: true,
        formType: 'range',
        width: 180
    }
]);
</script>

<script>
export default { name: 'system:crontab' };
</script>

<style scoped></style>
